<script setup lang="ts">
import { onMounted, PropType } from 'vue'
import { IconUser, IconClockCircle, IconList } from '@arco-design/web-vue/es/icon'
import { Message } from '@arco-design/web-vue'
import dayjs from 'dayjs'
import { useRouter } from 'vue-router'

defineOptions({
  name: 'ProjectCard'
})
const router = useRouter()
const props = defineProps({
  project: {
    type: Object as PropType<API.ProjectVo>,
    required: true
  }
})

// 获取状态文本
const getStatusText = (status: number) => {
  const statusMap = {
    0: '进行中',
    1: '已完成',
    2: '已暂停',
    3: '未开始'
  }
  return statusMap[status as keyof typeof statusMap]
}

// 获取状态颜色
const getStatusColor = (status: number) => {
  const colorMap = {
    0: 'blue',
    1: 'green',
    2: 'orange',
    3: 'gray'
  }
  return colorMap[status as keyof typeof colorMap]
}

// 格式化时间
const formatTime = (time: string) => {
  return dayjs(time).format('YYYY-MM-DD')
}

// 获取推延状态文本
const getDelayText = (canDelay: number) => {
  return canDelay === 1 ? '松弛' : '严格'
}

// 获取推延状态颜色
const getDelayColor = (canDelay: number) => {
  return canDelay === 1 ? 'green' : 'red'
}

// 获取角色文本
const getRoleText = (role: number | null) => {
  if (role === null) return '未分配'
  const roleMap = {
    0: '成员',
    1: '负责人'
  }
  return roleMap[role as keyof typeof roleMap]
}

// 获取角色颜色
const getRoleColor = (role: number | null) => {
  if (role === null) return 'gray'
  const colorMap = {
    0: 'green',
    1: 'orange'
  }
  return colorMap[role as keyof typeof colorMap]
}

// 处理卡片点击
const handleCardClick = () => {
  router.push(`projects/${props.project.id}`)
}

onMounted(() => {})
</script>

<template>
  <a-card class="project-card" :class="{ clickable: true }" @click="handleCardClick">
    <template #cover>
      <div class="card-cover">
        <img
          v-if="project.owner?.avatar"
          :src="project.owner.avatar"
          class="cover-image"
          alt="项目背景"
        />
        <div class="cover-gradient"></div>
        <div class="cover-content">
          <div class="project-info">
            <span class="project-name">{{ project.title || '未命名项目' }}</span>
            <div class="project-meta">
              <div class="meta-left">
                <div class="meta-item">
                  <icon-user class="meta-icon" />
                  <span class="meta-text">{{ project.owner?.name }}</span>
                </div>
                <div class="meta-item">
                  <icon-clock-circle class="meta-icon" />
                  <span class="meta-text">{{ formatTime(project.createAt) }}</span>
                </div>
              </div>
              <div class="meta-role">
                <a-tag size="small" class="meta-tag">{{ project.code }}</a-tag>
                <a-tag v-if="project.tag" size="small" class="meta-tag">{{ project.tag }}</a-tag>
                <a-tag size="small" :color="getRoleColor(project.role)" class="meta-tag">
                  {{ getRoleText(project.role) }}
                </a-tag>
              </div>
            </div>
          </div>
        </div>
      </div>
    </template>
    
    <div class="card-content">
      <!-- 进度部分 -->
      <div class="progress-section">
        <div class="progress-header">
          <span class="progress-text">项目进度</span>
          <span class="progress-value">{{ project.progress?.toFixed(2) * 100 }}%</span>
        </div>
        <a-progress :percent="project.progress" size="small" :show-text="false" />
      </div>

      <!-- 状态和日期部分 -->
      <div class="info-section">
        <div class="status-tags">
          <a-tag :color="getStatusColor(project.status || 0)">
            {{ getStatusText(project.status || 0) }}
          </a-tag>
          <a-tag :color="getDelayColor(project.canDelay || 0)">
            {{ getDelayText(project.canDelay || 0) }}
          </a-tag>
        </div>
        <div class="date-range">
          <span class="date-text">{{ dayjs(project.startTime).format('YYYY-MM-DD') }}</span>
          <span class="date-separator">至</span>
          <span class="date-text">{{ dayjs(project.endTime).format('YYYY-MM-DD') }}</span>
        </div>
      </div>

      <!-- 描述和创建者部分 -->
      <div class="description-row">
        <div class="description-section">
          <a-tooltip position="top">
            <div class="rich-text-content" v-html="project.description"></div>
            <template #content>
              <div v-html="project.description"></div>
            </template>
          </a-tooltip>
        </div>
        <div class="creator-info">
          <span class="creator-label">创建人:</span>
          <span class="creator-name">{{ project.creator?.name }}</span>
        </div>
      </div>
    </div>
  </a-card>
</template>

<style scoped>
.project-card {
  height: 100%;
  min-height: 320px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.card-cover {
  height: 140px;
  min-height: 140px;
  position: relative;
  overflow: hidden;
}

/* 封面图片样式优化 */
.cover-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(4px);
  transform: scale(1.1);
}

/* 渐变遮罩优化 */
.cover-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.4) 50%,
    rgba(0, 0, 0, 0.7) 100%
  );
  z-index: 1;
}

.cover-content {
  position: relative;
  z-index: 2;
  height: 100%;
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

/* 项目信息部分优化 */
.project-info {
  width: 100%;
}

.project-name {
  font-size: clamp(16px, 2vw, 18px);
  font-weight: 600;
  color: #fff;
  margin-bottom: 8px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 元数据部分优化 */
.project-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.meta-left {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  min-width: 0;
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 4px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 13px;
  white-space: nowrap;
}

.meta-text {
  overflow: hidden;
  text-overflow: ellipsis;
}

.meta-role {
  display: flex;
  gap: 4px;
  align-items: center;
  flex-wrap: wrap;
}

.meta-tag {
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 内容区域优化 */
.card-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px;
  min-height: 0;
}

/* 进度部分优化 */
.progress-section {
  flex-shrink: 0;
}

.progress-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

/* 信息部分优化 */
.info-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.status-tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.date-range {
  font-size: 13px;
  color: var(--color-text-3);
  white-space: nowrap;
}

/* 描述部分优化 */
.description-row {
  display: flex;
  gap: 12px;
  min-height: 0;
  overflow: hidden;
}

.description-section {
  flex: 1;
  min-width: 0;
}

.rich-text-content {
  font-size: 13px;
  line-height: 1.4;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  word-break: break-word;
}

/* 创建者信息优化 */
.creator-info {
  flex-shrink: 0;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

/* 响应式调整 */
@media screen and (max-width: 480px) {
  .project-meta {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .info-section {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .description-row {
    flex-direction: column;
  }
  
  .creator-info {
    margin-top: 8px;
  }
}

/* 添加鼠标悬停效果 */
.clickable {
  cursor: pointer;
  transition:
    transform 0.2s,
    box-shadow 0.2s;
}

.clickable:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
</style>
